<template>
  <div>About</div>
  <span>store中的count : {{ Scount }}</span>
  <br />
  <!-- <span>store中的name : {{ name }}</span> -->
  <br />
  <span>store中的Sname : {{ Sname }}</span>
  <br />
  <button @click="btnClick">About</button>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    Scount() {
      return this.$store.state.count
    },
    // 1.数组写法
    // mapState会将保存的state转化为对象进行返回，...后作为计算属性
    // ...mapState(['name', 'age']),
    // 2.对象写法
    ...mapState({
      Sname: state => state.name,
    }),
  },
  methods: {
    btnClick() {
      this.$store.commit('increment')
    },
  },
}
</script>

<style lang="scss" scoped></style>
